﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport"name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>商品评价</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />

    <link href="/template/default/css/style_ky.css" rel="stylesheet" />
    <link rel="stylesheet" href="/template/default/recouse/css/confirm.css?v=111" />
    <!--弹窗样式-->
    <!--<script type="text/javascript" src="/template/default/js/jquery.form.js"></script>
    <script type="text/javascript" src="/template/default/js/jquery.min.js"></script>
    <script type="text/javascript" src="/template/default/js/tooltips.js"></script>-->
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/template/default/raty/jquery.raty.min.js"></script>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

    <style>
        body{padding-bottom:55px}

        .label_radio input {
            margin-right: 5px;
        }

        .has-js .label_radio {
            padding-left: 26px;
        }

        .has-js .label_radio {
            background-position: 0 0;
            background: url(/template/default/recouse/images/radio_none.png) no-repeat;
            background-size: 16px 16px;
        }
        .has-js label.r_on {
            background-position: 0 0px;
            background: url(/template/default/recouse/images/radio_check.png) no-repeat;
            background-size: 16px 16px;
        }
        .has-js .label_radio input {
            position: absolute;
            left: -9999px;
        }

        .btn-danger {
            color: #ffffff;
            background-color: #d9534f;
            border-color: #d43f3a;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
        .money_text{
            font-size: 1.3rem;
            text-indent: 26px;
            margin-top: -40px;
        }
        .infobox{
            border-bottom: 1px solid #ddd;
        }
        .upload_pic{
            display: block;
            width: 100%;
            height: 40px;
            position: absolute;
            border-radius: 5px;
        }
        #submitBtn{
            right: -112px;
            position: relative;
            width: 22%;
        }

    </style>

</head>

<body style="min-width: 320px;max-width: 640px;margin:0 auto;background-color: white">
<header>
    <div class="tab_nav">
        <div class="header">
            <div class="h-left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="/template/default/images/arrow_left_white.png"/></a></div>
            <div class="h-mid">商品评价</div>
        </div>
    </div>
</header>
<form id="orderInfoForm" name="input"  method="post" onsubmit=" return check()">
    <input type="hidden" class="imageStr" value=""/>
    <input type="hidden" id="orderId" value="${order.id}"/>
    <section class="accounts">
        <%for(list in order.orderItemList){%>
            <%if(list.isEvaluate==0){%>
                <div >
                    <a href="/b/product/detailWap?id=${list.product.id}&shopId=${shopId!}">
                        <img src="${list.product.productImageList[0].thumbnailProductImagePath!systemConfig.defaultThumbnailProductImagePath}" width="160" style="width: 75px;">
                    </a>
                    <!--<div class="pull-left">
                        <div class="name"><a href="/b/product/detailWap?id=${list.product.id}&shopId=${shopId!}">${list.productName}</a></div>
                        <div class="price">
                            <span>${list.productPrice} 元</span>
                            <span class="num">数量：${list.productQuantity}</span>
                        </div>
                    </div>-->
                </div>

                <div>
                    <label style="margin-right:10px">描述相符</label>
                    <label class="score-callback-demo" data-score="5"></label>
                    <label style="margin-left:10px;color: #999" class="scoreMark">非常好</label>
                </div>
                <textarea rows="5" class="content" placeholder="发表评价!" style="width: 100%;border: 1px solid #ddd;margin-top: 3px;margin-bottom: 3px"></textarea>
                <div id="images_${list.product.id}">
                </div>
                <li><input value="上传图片" class="chooseImage money_buttom" style="position: absolute;width: 20%;background: #1c84c6" readonly /></li>
                <!--<span class="btn upload" >上传图片<input type="file" class="upload_pic"  name="evaluateimage" id="fssss" onblur="" capture=camera"/></span>-->
                <li>
                    <input id="submitBtn" value="发表评价" class="money_buttom" readonly/>
                    <input type="hidden" class="productId" value="${list.product.id}">
                </li>
                <div class="infobox"></div>
            <%}%>
        <%}%>

    </section>
</form>

<script src="/template/default/recouse/js/zepto.min.js" type="text/javascript"></script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId:'${appId}',
        timestamp: '${timestamp}',
        nonceStr: '${nonceStr}',
        signature: '${signature}',
        jsApiList: [
            'checkJsApi',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
        ]
    });

    wx.ready(function () {
        document.querySelector('.chooseImage').onclick = function () {
            var productId=$(this).parent().next().find(".productId").val();
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    //$("#images").append("<img id='previewImage' src='"+localIds+"' style='width: 70px; height: 70px'>")
                    wx.uploadImage({
                        localId: localIds[0],  // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            saveImage(serverId,productId);
                        }
                    });
                }
            });
        };


        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };
        /*document.querySelector('#chooseImage').onclick = function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    alert('已选择 ' + res.localIds.length + ' 张图片');
                }
            });
        };*/

        // 5.2 图片预览
        document.querySelector('#previewImage').onclick = function () {
            wx.previewImage({
                current: 'https://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
                urls: [
                    'https://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
                    'https://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
                    'https://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
                ]
            });
        };

        // 5.3 上传图片
        /*document.querySelector('#uploadImage').onclick = function () {
            if (images.localId.length == 0) {
                alert('请先使用 chooseImage 接口选择图片');
                return;
            }
            var i = 0, length = images.localId.length;
            images.serverId = [];
            function upload() {
                wx.uploadImage({
                    localId: images.localId[i],
                    success: function (res) {
                        alert(JSON.stringify(res));
                        i++;
                        alert('已上传：' + i + '/' + length);
                        images.serverId.push(res.serverId);
                        if (i < length) {
                            upload();
                        }
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
            upload();
        };*/

        // 5.4 下载图片
        document.querySelector('#downloadImage').onclick = function () {
            if (images.serverId.length === 0) {
                alert('请先使用 uploadImage 上传图片');
                return;
            }
            var i = 0, length = images.serverId.length;
            images.localId = [];
            function download() {
                wx.downloadImage({
                    serverId: images.serverId[i],
                    success: function (res) {
                        alert(JSON.stringify(res));
                        i++;
                        alert('已下载：' + i + '/' + length);
                        images.localId.push(res.localId);
                        if (i < length) {
                            download();
                        }
                    }
                });
            }
            download();
        };
    });

    wx.error(function (res) {
        alert(res.errMsg);
    });

    //保存微信服务器图片到本地
    function saveImage(serverId,productId){
        $.ajax({
            url: "/b/order/evaluateimage",
            type: 'GET',
            data:{
                "type":"wx",
                "shopId":"${shopId}",
                "serverId":serverId,

            },
            success: function(data){
                if(data.code == 1){
                    laye(data.desc);
                }else if (data.code == 0){
                    $("#images_"+productId).prepend("<img  class=" + data.random + " src=" + data.imageurl + " style='width:70px;height:70px'><input value='x' class=" + data.random + " onclick='deleteWebImage(\"" + data.imageurl + "\",\"" + data.random + "\")' class='x' readonly  style='width: 4%;margin-top: -44px;margin-left: 3px;'/>");
                    var imageStr= $(".imageStr").val();
                    if(imageStr.length<=0){//没上传图片
                        $(".imageStr").val(data.imageurl)
                    }else{//已上传其他图片
                        $(".imageStr").val(imageStr+","+data.imageurl);
                    }
                }
            }});
    }
</script>
</body>

<script type="text/javascript">
    $(function () {
        $.fn.raty.defaults.path = '/template/default/raty/img';
        $('.score-callback-demo').raty({
            score: function () {
                return $(this).attr('data-score');
            }
        });

        $(".score-callback-demo").click(function () {
            var countScore=$("input[name='score']").val();
            if(1==countScore){
                $(".scoreMark").text('非常差');
            }else if(2==countScore){
                $(".scoreMark").text('差');
            }else if(3==countScore){
                $(".scoreMark").text('一般');
            }else if(4==countScore){
                $(".scoreMark").text('好');
            }else if(5==countScore){
                $(".scoreMark").text('非常好');
            }
        });

    });


    /*$('#fssss').ajaxfileupload({
        action: '/b/order/evaluateimage',
        params: {
            extra: {sales_id: '111'}
        },
        onComplete: function(data) {
            $("#images").prepend("<img  class=" + data.random + " src=" + data.imageurl + " style='width: 18%'><input value='x' class=" + data.random + " onclick='deleteWebImage(\"" + data.imageurl + "\",\"" + data.random + "\")' class='x' readonly  style='width: 4%;margin-top: -44px;margin-left: 3px;'/>");
            var imageStr= $(".imageStr").val();
            if(imageStr.length<=0){//没上传图片
                $(".imageStr").val(data.imageurl)
            }else{//已上传其他图片
                $(".imageStr").val(imageStr+","+data.imageurl);
            }
            //$("#images").prepend("<img onclick='del(\"" + data.desc + "\")' id=" + data.desc + " src=" + data.url + "><input type='hidden' name='imgId[]' value='"+data.desc+"' />");
        },
        onStart: function() {
//            if(weWantedTo) return false; // cancels upload
        },
        onCancel: function() {
            console.log('no file selected');
        }
    });*/



    //确认评论
    $("#submitBtn").click(function () {
        var $this=$(this);
        var content=$(".content").val();
        var imageStr= $(".imageStr").val();
        var productId=$this.next().val();
        var orderId=$("#orderId").val();
        var countStar=$("input[name='score']").val();//星级
        $.ajax({
            url: "/b/order/evaluateSave",
            type: 'GET',
            data:{
                "content":content,
                "imageStr":imageStr,
                "productId":productId,
                "orderId":orderId,
                "countStar":countStar,
                "shopId":"${shopId}"
            },
            success: function(data){
                if(data.code == 1){
                    //注册错误
                    //layer.msg(data.desc);
                }else if (data.code == 0){
                    layer.msg('评论成功!');
                    window.location.href="/b/order/list?shopId=${shopId!}&type=dpj";

                }
            }});
    });

    //删除图片
    function deleteWebImage(imagePath,id){
        $.ajax({
            url: "${weburl}/b/order/deleteWebImage",
            type: 'GET',
            data:{
                "imagePath":imagePath,
                "shopId":"${shopId}"
            },
            success: function(data){
                if(data.code == 1) {
                    alert("失败");
                }else if (data.code == 0){
                    $("."+id).remove();
                    var imageStr= $(".imageStr").val();
                    var longImagepath=imagePath.length;
                    if(imageStr.indexOf(imagePath)==0 && imageStr.length>longImagepath){//开头
                        imageStr=imageStr.replace(imagePath+",","");
                    }else if(imageStr.length>longImagepath && imageStr.indexOf(imagePath)!=0 && !imageStr.endsWith(imagePath)){//中间
                        imageStr=imageStr.replace(imagePath+",","");
                    }else if(imageStr.length>longImagepath && imageStr.endsWith(imagePath)){//结尾
                        imageStr=imageStr.replace(","+imagePath,"");
                    }else{//单独
                        imageStr=imageStr.replace(imagePath,"");
                    }
                    $(".imageStr").val(imageStr);//删除之后图片字符串
                }
            }});
    }
</script>
</html>